<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="单词学习">
    <meta name="keywords" content="单词学习 练习">
    <meta name="keywords" content="学习无边界，乐在海中游">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>英语 培训 单词学习</title>
    <link rel="stylesheet" crossorigin="anonymous"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <link rel="stylesheet" crossorigin="anonymous"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/7.0.1/introjs.min.css">
    <style>
        @media (min-width: 0px) {
            html {
                font-size: 0.9rem;
            }
        }

        @media (min-width: 576px) {
            html {
                font-size: 1rem;
            }
        }

        @media (min-width: 768px) {
            html {
                font-size: 1rem;
            }
        }

        @media (min-width: 992px) {
            html {
                font-size: 1.25rem;
            }
        }

        @media (min-width: 1200px) {
            html {
                font-size: 1.25rem;
            }
        }

        .glassbga {
            /*渐变*/
            background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
            ;
            border-radius: 1rem;
            box-shadow: 6px 6px 10px rgba(112, 112, 112, 0.2);
        }

        .glassbg {
            background: linear-gradient(to right top, #65dfc9, #9ec7ce);
            border-radius: 1rem;
        }

        .circle-ab {
            background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
            height: 14rem;
            width: 14rem;
            position: absolute;
            border-radius: 50%;
            opacity: 0.3;
        }

        .circle1 {
            top: 0%;
            right: 13%;
            z-index: -1;
        }

        .circle2 {
            bottom: 6%;
            left: 13%;
            z-index: -1;
        }

        .center {
            position: absolute;
            left: 50%;
            top: 10%;
            transform: translate(-50%, -50%);
        }

        [v-cloak] {
            display: none;
        }

        div.introjs-tooltip-header,
        div.introjs-tooltiptext {
            color: #616161 !important;

        }
    </style>
</head>
<!--
     swiper 展示
-->

<body id="q-app" class=" glassbg text-white  " onbeforeunload="  gd.storage.set('page', 1) ">
    <!--悬浮球-->
    <div class="circle1 circle-ab"> </div>
    <div class="circle2 circle-ab"></div>
    <!---上面的结果框val--->
    <div v-cloak class="container ">
        <div class="w-100 mb-5   d-none d-md-block"><!---高度垫子 小设备隐藏--></div>
    </div>
    <div class="container ">
        <div class="mt-2 row justify-content-center  ">
            <div class="w-100 mb-3   d-none d-md-block"><!---高度垫子 小设备隐藏--></div>
            <div>
                <h4>双语对照 关联学习</h4>
            </div>
            <div class="w-100 mb-3   d-none d-md-block"><!---高度垫子 小设备隐藏--></div>
        </div>
    </div>
    <!--卡片-->
    <div v-cloak class=" container-sm   glassbga  pt-5   ">

        <div class=" row   align-items-center   justify-content-around   ">

            <img onload="er.emit('进度',30) " onerror="er.emit('资源载入失败',event)" v-bind:src="pd.row.img"
                style="max-width:100%;overflow:hidden;" class="img-fluid" alt="...">

        </div>
        <div class=" row   align-items-center   justify-content-around" style="height: 80px;">

            <button @click="er.emit('播放',0) "
                class="btn ml-sm-5 mx-sm-2   px-sm-5 shadow  badge-secondary badge   badge-pill">
                <h3 class="text-nowrap"> {{pd.row.zh || 中文}} </h3>
            </button>
            <button @click="er.emit('播放',1) "
                class="btn mr-sm-5 mx-sm-2   px-sm-5    shadow   badge-info badge   badge-pill">
                <h3 class="text-nowrap">{{pd.row.en || 英文}} </h3>
            </button>
        </div>
        <!---nan-->
        <div class=" d-flex    align-items-center  justify-content-around " style="height: 80px;">

            <span class="  w-50  ml-sm-5 mx-sm-2     shadow   badge-info   badge badge-pill">
                <audio onloadeddata="er.emit('进度',31) " onerror="er.emit('资源载入失败',event)" class="  w-100   "
                    controls="controls" v-bind:src="pd.row.zh4mp3">
                    Your browser does not support the audio element.
                </audio>
            </span>
            <span class="  w-50    mr-sm-5 mx-sm-2     shadow   badge-info badge   badge-pill">
                <audio onloadeddata="er.emit('进度',32) " onerror="er.emit('资源载入失败',event)" class="  w-100   "
                    controls="controls" v-bind:src="pd.row.en4mp3">
                    Your browser does not support the audio element.
                </audio>
            </span>
        </div>
        <!--翻页-->
        <div class="  row justify-content-center rounded   ">
            <div class="w-100 mt-5   d-none d-md-block"><!---高度垫子 小设备隐藏--></div>
            <div class=" d-flex  col-12  col-md-10  bg-secondary glassbga  justify-content-around ">
                <button @click="er.emit('翻页',-1) " class="btn shadow-lg shadow btn-info">上一个
                    <span class="position-absolute badge badge-info badge-pill" v-text="pd.nameSize"> </span>
                </button>
                <div class=" col-8   row justify-content-around rounded   ">
                    <label class="  text-dark d-flex  align-items-center  ">当前第</label>
                    <input @change="er.emit('翻页',0) " type="text" v-model="pd.page" class="w-25 form-control">
                    <label class="text-dark d-flex  align-items-center  ">个共{{ pd.total }}</label>
                </div>
                <button @click="er.emit('翻页',1) " class="btn shadow-lg shadow btn-info">下一个
                    <span class="position-absolute badge badge-light badge-pill" v-text="pd.nameSize"> </span>
                </button>
            </div>
        </div>

    </div>

    <div class=" container">
        <p>看：韦氏英标 结合发音 听：中英对照建立关联</p>
    </div>
    <div class="w-100 mb-5   d-none d-md-block"><!---高度垫子 小设备隐藏--></div>

    <!--功能选择--->
    <div class="fixed-bottom row justify-content-center rounded   ">
        <div class="mt-2 row justify-content-center  ">

            <div class="container   ">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link shadow   bg-info text-white  px-lg-5 mx-md-2 mx-lg-5  active "
                            v-bind:href="'./learnword.html?t='+pd.type+'&p='+pd.pid">学一学</a>
                    </li>
                    <li class="nav-item" id="prac">
                        <a class="nav-link shadow   bg-secondary text-white  px-lg-5 mx-md-2 mx-lg-5"
                            v-bind:href="'./pracword.html?t='+pd.type+'&p='+pd.pid">练一练</a>
                    </li>
                    <li class="nav-item" id="test">
                        <a class="nav-link shadow   bg-secondary  text-white  px-lg-5 mx-md-2 mx-lg-5"
                            v-bind:href="'./testword.html?t='+pd.type+'&p='+pd.pid">试一试</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!---侧边栏 -->
    <transition v-cloak enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
        <nav v-if="pd.showNav " class="    d-flex   bg-light"
            style="z-index:1082; top:0;left:0;width: 220px; height: 100vh; position: fixed;  ">
            <ul style="overflow-y: scroll;  width: 100vh; " >
                <li class="nav-item ">
                    <a class="nav-link" href="#">目录 </a>
                </li>
                <li v-for="(site, index) in pd.leftList" class="nav-item  "
                    :class="[{'bg-warning  glassbga': (site.f  == pd.pid )} ]">
                    <a class="nav-link" v-bind:href="site.url">第{{site.f}}课</a>
                </li>

            </ul>
        </nav>
    </transition>
    <!---info提示信息--->
    <transition v-cloak mode="out-in" enter-active-class="animated pulse" leave-active-class="animated fadeOut">
        <div class=" container-sm  fixed-top    " style="z-index: 1083 ;" v-for="site in pd.info_list">
            <div class="alert  alert-warning alert-dismissible fade show" role="alert">
                <strong>{{site.type}}</strong>{{ site.info }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </transition>


    <!---载入动画--->
    <transition leave-active-class="animated fadeOut">
        <div v-if="pd.sp==0?false:true"
            class="center w-100 mt-5  px-3  row d-flex  clearfix  align-items-center  justify-content-center  "
            style="z-index: 1082  ;">
            <div class="spinner-border   "></div>
        </div>
    </transition>
    <!---进度条---->
    <transition v-cloak>
        <div v-if="pd.showProgress" class="center w-75   px-3   " style="z-index: 1082 ; ">
            <div class="progress">
                <div class=" progress-bar  progress-bar-striped progress-bar-animated  "
                    v-bind:style="{ width: pd.vprogress+'%' , }">{{pd.vprogress}}%</div>
            </div>
        </div>
    </transition>
    <!---遮罩1024--->

    <div v-if="pd.showLoading" @click="er.emit('遮罩',0) " style="z-index: 1081  ;" class=" modal-backdrop show "> </div>


    <div class=" d-flex w-25  fixed-bottom justify-content-between  ">
        <!-- 齿轮修改 --->
        <span @click="er.emit('导航',1) " class="  d-none  btn     justify-content-end      "
            style="font-size:28px;    ">⚙</span>
        <button id="leftMenu" @click="er.emit('导航',1) " class="navbar-light  navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.47/vue.global.prod.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.2/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.2.8/EventEmitter.min.js"></script>
    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script -->
    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.11/URI.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/7.0.1/intro.min.js"></script>



    <script>
        const er = new EventEmitter //事件线
        const { onMounted, emits, createApp, ref, watch, computed } = Vue

        const gd = {};//全局数据 解决调用引用问题
        gd.reg = {} //组成类到全局调用
        gd.group = 'eng' //功能应用分组

        gd.storage = {
            //本地浏览器 存取组件
            set(key, value, area) {
                key = area ? area + ':' + key : key;//分区域分区组
                key = gd.group + '.' + key;//分组
                localStorage.setItem(key, JSON.stringify(value));
            },
            get(key, area) {
                key = area ? area + ':' + key : key;//分区域分区组
                key = gd.group + '.' + key;//分组
                return JSON.parse(localStorage.getItem(key));
            },
            remove(key, area) {
                key = area ? area + ':' + key : key;//分区域分区组
                key = gd.group + '.' + key;//分组
                localStorage.removeItem(key);
            },
        }
        gd.pd = ref({});//page data 页面元素引用"数据"
        //const pd = ref({ "load": [] }); //特殊变量，页面数据
        const pvs = gd.pd.value; //变量代理访问
        //gd.pd = pd;//page data 页面元素引用"数据"

        class pgui {
            /* 界面控制类 初始化界面默认值 */
            constructor(arg) {
                //初始（值）
                gd.reg.ui = this//全局资源
                this.vs = {} //内部变量
                //--界面值

                pvs.sp = 0; //遮罩路由 (0.无，1.名单，2.登入 ,3.管理)
                pvs.row = {};//单词数据的一行
                pvs.showNav = 0;//导航显示
                pvs.showLoading = 0 //遮罩
                pvs.total = 0

                pvs.info_list = []//{info:"2",type:"2"}
                pvs.vprogress = 100 //进度条
                pvs.showProgress = 0 //进度条
                //----页面参数
                pvs.url = new URI() //获取去 type，pid ，默认访问本站，数据加载主站
                pvs.leftList = {} //左侧列表
                this.init();
                pvs.loadNum = 3 //2+1
                pvs.loaded = 0 //已完成载入
                pvs.reload = 3
                pvs.timeOut = 6
                //console.log(pvs.url.query({ reload: 7, }) )

            }

            init() {
                //初始（设置）

                er.on('遮罩', this.loginLoading)
                er.on('播放', this.play)
                er.on('翻页', this.nextPage)
                er.on('进度', this.progress)
                er.on('导航', this.trunNav)
                er.on('帮助.练一练', this.help2next)
                er.on('资源载入失败', this.setReload)//预加载

            }
            setReload(evt) {
                console.log('---资源载入失败---', evt)

            }
            aoutReload(t) {
                const ui = gd.reg.ui
                
                // t =1 开启 ，t=0 结束
                console.log('aoutReload == ', t)
                if (t == 0) { clearTimeout(pvs.outId); return }
                pvs.loaded = 0 //重新加载新数据
                //---
                var ag = new URI().query(true)
                console.log('1.url == ', ag)

                if (ag.reload && Math.trunc(ag.reload) > pvs.reload) {
                    console.log('2.url == ', ag)
                    ui.loginLoading(0)
                    ui.spto(0)
                    ui.showInfo('加载资源失败','稍后重试')
                    
                    return
                }
                if (!ag.reload) {
                    ag.reload = 1
                    ag.page = pvs.page
                } else {
                    ag.reload = Math.trunc(ag.reload) + 1
                }
                //创建超时
                pvs.outId = setTimeout(() => {
                    console.log('3.url == ', ag)
                    window.location.href = pvs.url.query(ag);
                }, pvs.timeOut * 1000)
            }
            trunNav(n) {
                //导航栏 n 开关
                const that = gd.oui
                pvs.showNav = n
                pvs.showLoading = n
            }
            loadJson() {
                //一次性加载 json数据  默认数据来源当前站点，当前没有访问主站
                const that = gd.oui
        
                that.progressVal(6)
                var src = pvs.url.host();//本站
                var dc = pvs.url.query(true);//参数
                pvs.page = dc['page'] ? dc['page'] : gd.storage.get('page') ? gd.storage.get('page') : 1;//
                pvs.type = dc['t'] ? dc['t'] : gd.storage.get('pageType') ? gd.storage.get('pageType') : 'camb_word';//业务类型，url优先
                pvs.pid = dc['p'] ? dc['p'] : gd.storage.get('pid', pvs.type) ? gd.storage.get('pid', pvs.type) : 365;//对应id，url优先
                pvs.rpid = String(pvs.pid).padStart(3, '0'); //补全id定长  /0/5/5.json  /1/5/15.json  
                gd.storage.set('pageType', pvs.type)
                gd.storage.set(pvs.type + '_pid', pvs.pid)

                console.log("script参数=", src, pvs.type, pvs.page, pvs.pid)

                //document.getElementById('dataFromJson').remove ()
                // delete  dataFromJSON .data
                // 添加数据json元素

                var st = document.createElement("script");
                st.id = 'dataFromJson';
                st.src = `//${src}/${pvs.type}/${pvs.rpid.substring(pvs.rpid.length - 2, pvs.rpid.length - 1)}/${pvs.rpid.substring(pvs.rpid.length - 1)}/cfg_${pvs.pid}.jsonp`


                st.onerror = that.signErr;
                st.onload = that.endJson;
                //console.log(dataFromJSON)
                document.body.appendChild(st);

                //词展示++++
                that.loginLoading(1) //loading 
                that.spto(1) //loading 
                //leftList  加载
                var wl = document.createElement("script");
                wl.src = `//${src}/${pvs.type}/word_list.jsonp`
                wl.onload = that.leftListLoad;
                document.body.appendChild(wl);
            }
            endJson(dat) {
                //json加载完成
                const that = gd.oui
                that.loginLoading(1) //json加载 
                that.spto(1) //loading 

                console.log('dat==', dat)
                pvs.total = dataFromJSON.data.length
                if (typeof (dataFromJSON) == "undefined" || dataFromJSON.data.length == 0) { that.showInfo("没找到数据", '单词组'); return; } //没数据
                that.rowLoad(1) //处理 显示第一个单词

            }
            getPage() {
                // 超限 问题处理
                var page = pvs.page
                page = parseInt(page);
                if (page <= 0) { page = 1; }
                if (page > pvs.total) { page = pvs.total; }
                gd.storage.set('page', page);
                return page;

            }
            nextPage(n) {
                //内部翻页
                const that = gd.oui
                //document.getElementById('dataFromJson').remove ()
                // delete  dataFromJSON .data
                //on mount 
                console.log('内部翻页', pvs.page, n)
                //限定page的范围
                pvs.page = parseInt(pvs.page) + n;
                if (pvs.page <= 0) {
                    pvs.page = 1;
                    that.showInfo("已经到头", '翻页');
                    return;
                }
                if (pvs.page > pvs.total) {
                    pvs.page = pvs.total; that.showInfo("已经到尾部", '翻页');
                    setTimeout(function () { er.emit('帮助.练一练') }, 1800);//跳转提示
                    return;
                }
                //---处理
                gd.storage.set('page', pvs.page)
                that.progressVal(6) //新的一页

                //载入数据 
                that.rowLoad(1)
            }
            help2next() {
                var setpList = [
                    {
                        title: '来接受下一个挑战',
                        element: document.querySelector('#prac'),
                        intro: '通过<strong>练一练</strong>来证明学习成果',
                    },

                ];
                var helpOpt = {
                    nextLabel: '下一个  &rarr;',    // 下一个按钮文字
                    prevLabel: '&larr; 上一个',     // 上一个按钮文字
                    doneLabel: '好',           // 完成按钮文字
                    exitOnOverlayClick: false,  // 点击叠加层时是否退出介绍
                    showStepNumbers: false,     // 是否显示红色圆圈的步骤编号
                    disableInteraction: true,   // 是否禁用与突出显示的框内的元素的交互，就是禁止点击
                    showBullets: false          // 是否显示面板指示点
                }
                helpOpt['steps'] = setpList
                introJs().setOptions(helpOpt).start();
            }
            play(n) {
                //播
                console.log('播放=', n)
                //播放指定 document.querySelectorAll('audio')[0].play()
                document.querySelectorAll('audio')[n].play()
            }
            loginLoading(n) {
                //登入中效果
                pvs.showLoading = n
                if (pvs.showLoading == 0) { pvs.showNav = 0 }

            }
            spto(n) {
                //遮罩和二级界面
                /*切换界面*/
                pvs.sp = n
            }
            progressVal(n) {
                //直接设置值
                const that = gd.oui
                pvs.vprogress = n
                that.progress(0)
            }
            progress(n) {
                const that = gd.oui
                //进度  0 和 100 都隐藏

                pvs.vprogress = pvs.vprogress + n
                console.log("进度", n, pvs.vprogress)
                if (pvs.vprogress > 98) {
                    that.aoutReload(0) //结束计时
                    pvs.vprogress = 100
                    setTimeout(function () { pvs.showProgress = 0 }, 155);
                    that.spto(0)
                    that.loginLoading(0)
                } else {
                    pvs.showProgress = 1 //未加载
                }
            }

            showInfo(info, type = '') {
                //结果提示信息 （数据驱动）
                //添加数据，来添加提示
                pvs.info_list.push({ "info": info, "type": type })
                //缺少动效
                setTimeout(function () { pvs.info_list.splice(0, 1); }, 4000);
            }
            signErr(error) {
                //登入错误处理
                const that = gd.oui

                console.log('Error:', error); //提示框
                that.loginLoading(0) //loading 
                that.spto(0) //loading  
                that.showInfo('无法加载到数据，刷新重试', '载入数据：') //loading  


            }
            leftListLoad(dat) {
                //单词列表加载
                console.log('leftListLoad=', pvs.url.filename(), wordList)//来之json文件
                pvs.leftList = wordList.data
                pvs.leftList = _.map(pvs.leftList, (o) => { o.url = './' + pvs.url.filename() + `?p=${o.f}&t=${pvs.type}`; return o })

            }
            rowLoad(n) {
                // 读取行数据显示
                
                const that = gd.oui
          
                that.loginLoading(1) //json加载 
                that.spto(1) //loading 
                that.aoutReload(1) //计时开始
                //设置数据
                var row = dataFromJSON.data[that.getPage() - 1] //page不存在或超限
                //pvs.row.img = '/en500word/h/e/健康.png' //  /en500word/h/e/健康.png
                console.log(n, dataFromJSON.src, row, dataFromJSON.data)
                //设置 mp3
                pvs.row.zh = row.zh
                pvs.row.en = row.en
                pvs.row.zh4mp3 = `//${pvs.url.host()}/${pvs.type}/${row.en.substring(0, 1).toLowerCase()}/${row.en.substring(1, 2).toLowerCase()}/${row.zh4m2mp3}`
                pvs.row.en4mp3 = `//${pvs.url.host()}/${pvs.type}/${row.en.substring(0, 1).toLowerCase()}/${row.en.substring(1, 2).toLowerCase()}/${row.en4m2mp3}`
                pvs.row.img = `//${pvs.url.host()}/${pvs.type}/${row.en.substring(0, 1).toLowerCase()}/${row.en.substring(1, 2).toLowerCase()}/${row.img}`


            }



            watchPg(newValue, oldValue) {
                //watch
                //console.log('gd pagedata 被修改', newValue.page, oldValue.page)


                //console.log('gd pagedata 被修改\n', newValue, '\n', oldValue)
            }
        }

        //----------开始
        let appdat = {
            setup() {

                const oui = new pgui(); //界面更改"方法"
                //const ocls = new cls(12);//默认选择
                //---放入全局解决this问题
                //gd.ocls = ocls; //抽奖类
                //gd.oin = oin; //通信逻辑
                gd.oui = oui; //ui界面


                watch(gd.pd, oui.watchPg, { deep: true });

                //computed(() => { return JSON.parse(JSON.stringify(pvs)); }); //对值二次计算
                //onMounted(() => ocls.bindEvt()); //窗口大小变动事件
                //onMounted(() => oui.remount()); //已经登入刷新处理
                onMounted(() => oui.loadJson(0)); //已经登入刷新处理
                //--变量关联到html的映射 js访问要加.value
                return { er, oui, "pd": gd.pd, "ref_login_manage": gd.pd.refManageEmt, }
            }
        }
        const app = createApp(appdat)
        //app.use(Quasar) //vue的ui
        app.mount('#q-app')
    </script>





    <script>
            (() => setTimeout(() => {
                var script = document.createElement("script");
                script.src = 'https://an.17121.top/';
                document.body.append(script)
            }, 300))()


    </script>
</body>

</html>